<!DOCTYPE html>
<html>
  
    <head>
    <meta charset="UTF-8">
    <title>-</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/tadmin.css">
  <script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
  <script src="./lib/layui/layui.js" charset="utf-8"></script>
   <script type="text/javascript" src="./js/tadmin.js"></script>  
  </head>
  
  <body>
   
    <div class="" style="margin: 20px;">
    
 	<div class="layui-tab layui-tab-brief" >
	  <ul class="layui-tab-title">
	    <li class="layui-this">USDT</li>
	    <li>BTC</li>
	    <li>ETH</li>
	    <li>OKB</li>
	
	  </ul>
	  <div class="layui-tab-content" >
	    <div class="layui-tab-item layui-show">
	    
	     <div class="layui-row">
		    <div class="layui-col-xs2">
		      
		      <div class="layui-card" >
		        <div class="layui-card-header">
		        
		        <input type="text" name="title" required lay-verify="required" placeholder="搜索" autocomplete="off" class="layui-input">  
		        </div>
		        <div class="layui-card-body" style="padding: 0px 10px 0px 10px;" >
		        <table class="layui-table" id="tngou-table" lay-skin="line"> 
				</table>
		        <script>
				layui.use('table', function(){
				  var table = layui.table;
				  
				  table.render({
				    elem: '#tngou-table'
				    ,height: 'full-300'
				    ,url:'json/transaction_nemu.json'   
				    ,cols: [[
				    	{type:'checkbox'}	    	      
				    	,{field:'f1', title:'币对'}		    	    
				    	,{field:'f2', title:'涨幅',  sort: true}     
								
				    ]]
				   
				    
				  });
				 
				});
		</script>
		        </div>
		      </div>
		      
		    </div>
		    <div class="layui-col-xs10">
		     	 <div class="layui-row" style="margin: 10px;">
			      <div class="layui-card" >
			        <div class="layui-card-header">TRA/USDT</div>
			        <div class="layui-card-body" >
			         <blockquote class="layui-elem-quote">资产
			         <span class="">ETC可用0.00000/冻结0.00000充ETC</span>
			         <span class="tngou-right " >USDT可用0.00/冻结0.00充USDT</span>
			         </blockquote>
			         
			          <div class="layui-row" >
					    <div class="layui-col-md5" >
					    	
					      <h1 style="color:#FF5722;margin-top: 10px;">706.5395</h1><button class="layui-btn layui-btn-xs">+2.31%</button>
					       <hr class="layui-bg-red">
					       
					       <table class="layui-table" lay-skin="row">
							  <tbody>
							    <tr>
							      <td>人民币价格</td>
							      <td>¥4,484.56</td>
							      <td>24h最高价</td>
							       <td>717.9999</td>
							    </tr>
							    <tr>
							      <td>24h成交量</td>
							      <td>157,761 ETH</td>
							      <td>24h最低价</td>
							      <td>681.4000</td>
							    </tr>
							     <tr>
							      <td>24h资金流入</td>
							      <td>50188.8K USDT</td>
							      <td>24h资金流出</td>
							      <td>50169.3K USDT</td>
							    </tr>
							  </tbody>
							</table>
					       
					       <div class="layui-tab">
						  <ul class="layui-tab-title">
						    <li class="layui-this">行情</li>
						    <li>ETH介绍</li>
						    
						  </ul>
						  <div class="layui-tab-content">
						    <div class="layui-tab-item layui-show">
						     
						     <script src="http://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>
						     <div id="main" style="width: 100%;height:250px;"></div>
						     <script type="text/javascript">
					        // 基于准备好的dom，初始化echarts实例
					        var myChart = echarts.init(document.getElementById('main'));
					        
					        function randomData() {
					            now = new Date(+now + oneDay);
					            value = value + Math.random() * 21 - 10;
					            return {
					                name: now.toString(),
					                value: [
					                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
					                    Math.round(value)
					                ]
					            }
					        }

					        var data = [];
					        var now = +new Date(1997, 9, 3);
					        var oneDay = 24 * 3600 * 1000;
					        var value = Math.random() * 1000;
					        for (var i = 0; i < 1000; i++) {
					            data.push(randomData());
					        }

					        option = {
					           
					            tooltip: {
					                trigger: 'axis',
					                formatter: function (params) {
					                    params = params[0];
					                    var date = new Date(params.name);
					                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
					                },
					                axisPointer: {
					                    animation: false
					                }
					            },
					            xAxis: {
					                type: 'time',
					                splitLine: {
					                    show: false
					                }
					            },
					            yAxis: {
					                type: 'value',
					                boundaryGap: [0, '100%'],
					                splitLine: {
					                    show: false
					                }
					            },
					            series: [{
					                name: '模拟数据',
					                type: 'line',
					                showSymbol: false,
					                hoverAnimation: false,
					                data: data
					            }]
					        };

					        setInterval(function () {

					            for (var i = 0; i < 5; i++) {
					                data.shift();
					                data.push(randomData());
					            }

					            myChart.setOption({
					                series: [{
					                    data: data
					                }]
					            });
					        }, 1000);
					     	// 使用刚指定的配置项和数据显示图表。
					        myChart.setOption(option);
					        </script>
						    </div>
						    <div class="layui-tab-item">
						    ETH 以太坊
						     <table class="layui-table" lay-skin="row">
							  <tbody>
							    <tr>
							      <td width="80px">发行时间</td>
							      <td>2014/7/24</td>
							      <td>发行总量</td>
							       <td>9631.15 万</td>
							    </tr>
							    <tr>
							      <td>流通总量</td>
							      <td>9631.15 万</td>
							      <td>众筹价格</td>
							      <td>--</td>
							    </tr>
							     <tr>
							      <td>官网</td>
							      <td colspan="3">https://www.ethereum.org/</td>						     
							    </tr>
							    <tr>
							      <td>白皮书</td>
							      <td colspan="3">https://www.ethereum.org/</td>						     
							    </tr>
							     <tr>
							      <td>介绍</td>
							      <td colspan="3">以太坊（Ethereum）是下一代密码学账本，可以支持众多的高级功能，包括用户发行货币，智能协议，去中心化的交易和设立去中心化自治组织(DAOs)或去中心化自治公司（DACs）。以太坊并不是把每一单个类型的功能作为特性来特别支持，相反，以太坊包括一个内置的图灵完备的脚本语言，允许通过被称为`合同`的机制来为自己想实现的特性写代码。一个合同就像一个自动的代理，每当接收到一笔交易，合同就会运行特定的一段代码，这段代码能修改合同内部的数据存储或者发送交易。</td>						     
							    </tr>
							  </tbody>
							</table>
						    </div>
						   
						  </div>
						</div>
					    </div>
					    <div class="layui-col-md4">
					     <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
						  <ul class="layui-tab-title">
						    <li class="layui-this">买入ETC</li>
						    <li>卖出ETC</li>						   
						  </ul>
						  <div class="layui-tab-content" >
						    <div class="layui-tab-item layui-show">
						    <form class="layui-form layui-form-pane" action="">
						      <div class="layui-form-item"></div>
						       <div class="layui-form-item">
							    <label class="layui-form-label">委托类型</label>
							    <div class="layui-input-block">
							     <select name="quiz1">
							        <option value="">限价单</option>
							        <option value="">市价单</option>
							        <option value="">计划委托</option>
							      </select>
							   	</div>
							  </div>
							  <div class="layui-form-item">
							    <label class="layui-form-label">价格(USDT)</label>
							    <div class="layui-input-block">
							      <input name="title" autocomplete="off" placeholder="" class="layui-input" type="text">
							    </div>
							  </div>
							  <div class="layui-form-item">
							    <label class="layui-form-label">数量(ETH)</label>
							    <div class="layui-input-block">
							      <input name="title" autocomplete="off" placeholder="" class="layui-input" type="text">
							    </div>
							  </div>
							   <div class="layui-form-item">
							 	 <div class="layui-progress" lay-showpercent="true">
								  <div class="layui-progress-bar layui-bg-orange" lay-percent="40%"></div>
								</div>
								</div>
							   <div class="layui-form-item">
							    <label class="layui-form-label">金额(USDT)</label>
							    <div class="layui-input-block">
							      <input name="title" autocomplete="off" placeholder="" class="layui-input" type="text">
							    </div>
							  </div>
							   <div class="layui-form-item">
							   <span>
							   可买USDT：<i style="color: #FF5722">0.0000</i>
							   </span>
							   <span class="tngou-right">
							 ETH余额：<i style="color: #5FB878">0.0000</i>
							   </span>
							    </div>
							    
							  <div class="layui-form-item">
							    <button class="layui-btn layui-btn-fluid layui-btn-radius" lay-submit="" >买入(ETH)</button>
							  </div>
							</form>
													    
						    </div>
						    <div class="layui-tab-item">
						    
						     <form class="layui-form layui-form-pane" action="">
						    <div class="layui-form-item"></div>
						       <div class="layui-form-item">
							    <label class="layui-form-label">委托类型</label>
							    <div class="layui-input-block">
							     <select name="quiz1">
							        <option value="">限价单</option>
							        <option value="">市价单</option>
							        <option value="">计划委托</option>
							      </select>
							   	</div>
							  </div>
							  <div class="layui-form-item">
							    <label class="layui-form-label">价格(USDT)</label>
							    <div class="layui-input-block">
							      <input name="title" autocomplete="off" placeholder="" class="layui-input" type="text">
							    </div>
							  </div>
							  <div class="layui-form-item">
							    <label class="layui-form-label">数量(ETH)</label>
							    <div class="layui-input-block">
							      <input name="title" autocomplete="off" placeholder="" class="layui-input" type="text">
							    </div>
							  </div>
							   <div class="layui-form-item">
							 	 <div class="layui-progress" lay-showpercent="true">
								  <div class="layui-progress-bar layui-bg-orange" lay-percent="40%"></div>
								</div>
								</div>
							   <div class="layui-form-item">
							    <label class="layui-form-label">金额(USDT)</label>
							    <div class="layui-input-block">
							      <input name="title" autocomplete="off" placeholder="" class="layui-input" type="text">
							    </div>
							  </div>
							   <div class="layui-form-item">
							   <span>
							   可卖USDT：<i style="color: #FF5722">0.0000</i>
							   </span>
							   <span class="tngou-right">
							 ETH余额：<i style="color: #5FB878">0.0000</i>
							   </span>
							    </div>
							  <div class="layui-form-item">
							    <button class="layui-btn layui-btn-fluid layui-btn-radius layui-btn-danger" lay-submit="" >买入(ETH)</button>
							  </div>
							</form>
							
						    </div>
						  </div>
						</div> 
					    </div>
					    <div class="layui-col-md3">
					      
					      
					      <div class="layui-card" style="margin: 10px">
						  <div class="layui-card-header">深度合并  <span class="tngou-right">4位小数</span></div>
						  <div class="layui-card-body" style="padding: 0px 10px 0px 10px;">
						 	 <table class="layui-table" id="tngou-table-p" lay-skin="line"> 
								</table>
						        <script>
								layui.use('table', function(){
								  var table = layui.table;
								  
								  table.render({
								    elem: '#tngou-table-p'
								    ,height: 'full-400'
								    ,url:'json/transaction_price.json'   
								    ,cols: [[
		    	      
								    	{field:'f1', title:'价格(USDT)'}		    	    
								    	,{field:'f2', title:'数量(ETC)',  sort: true}     
												
								    ]]
								   
								    
								  });
								 
								});
						</script>
						  </div>
						</div>
					      
					    </div>
   
   					 </div>
			         
			        </div>
			      </div>
			    </div>
		      </div>
		    </div>
		  </div>
  
	    </div>
	   
	  </div>
	</div> 
    


  </body>

</html>